{"componentChunkName":"component---src-templates-post-jsx","path":"/history api 정리/","result":{"data":{"site":{"siteMetadata":{"title":"jigglog","author":"JIGGLYPOP","homepage":"http://jigglog.s3-website.ap-northeast-2.amazonaws.com"}},"post":{"id":"e1bb7b6c-789d-5875-a639-d99b7bf2a97f","html":"1. index
\n<!doctype html>\n<html lang=\"ko\">\n <head>\n <title>History API Sample</title>\n <meta charset=\"utf-8\">\n <style>\n section {margin: 20px 0;}\n </style>\n </head>\n <body>\n <section>\n <h2>push state</h2>\n <button id=\"push-state1\">pushState1</button>\n <button id=\"push-state2\">pushState2</button>\n <button id=\"push-state3\">pushState3</button>\n </section>\n <section>\n <h2>replace state</h2>\n <button id=\"replace-state\">replaceState</button>\n </section>\n <section>\n <h2>변경</h2>\n <div id=\"info\"></div>\n </section>\n </body>\n <script type=\"module\" src=\"./src/index.js\"></script>\n</html>
2. index.js
\n// 현재의 history state 값을 출력합니다.\nconst currentHistoryState = () => {\n if (history.state) {\n document.getElementById(\"info\").innerHTML = `\n <div>\n <h1>${history.state}</h1>\n </div>`;\n } else {\n document.getElementById(\"info\").innerHTML = `\n <div>\n <h1>페이지가 없습니다.</h1>\n </div>`;\n }\n};\n\ncurrentHistoryState();\n\nconst pushState1Btn = document.getElementById(\"push-state1\");\nconst pushState2Btn = document.getElementById(\"push-state2\");\nconst pushState3Btn = document.getElementById(\"push-state3\");\nconst replaceStateBtn = document.getElementById(\"replace-state\");\n\n// pushState()\npushState1Btn.addEventListener(\"click\", () => {\n history.pushState(\"pushState1\", \"\", \"/push-state1\");\n currentHistoryState();\n});\npushState2Btn.addEventListener(\"click\", () => {\n history.pushState(\"pushState2\", \"\", \"/push-state2\");\n currentHistoryState();\n});\npushState3Btn.addEventListener(\"click\", () => {\n history.pushState(\"pushState3\", \"\", \"/push-state3\");\n currentHistoryState();\n});\n\n// replaceState()\nreplaceStateBtn.addEventListener(\"click\", () => {\n history.replaceState(\"replaceState\", \"\", \"/replace-state\");\n currentHistoryState();\n});\n\n// 브라우저의 뒤로가기 / 앞으로가기를 누르면 history state 값을 확인하여 출력합니다.\nwindow.addEventListener(\"popstate\", () => {\n currentHistoryState();\n});
3. store
\n/* \n store.js 임시 구현\n \n context를 create하는 컴포넌트 => constructor에서 store.set('context', initialData)하기\n context의 update에 따라 리렌더링되는 컴포넌트 => constructor에서 store.subscribe('context', this)하기\n \n context를 set하는 코드 라인 => data를 업데이트하는 곳에서 store.set('context', data)하기\n context를 get하는 코드 라인 => data를 사용하는 곳에서 store.get('context')하기\n*/\n\nconst store = {\n subscribe: (context, ref) => {\n store[context].refs.push(ref);\n },\n get: (context) => {\n return store[context].data;\n },\n set: (context, data) => {\n const initialSet = !store[context];\n\n if (initialSet) {\n store[context] = {\n data: data,\n refs: [],\n };\n return;\n }\n\n console.log('new data', data);\n store[context].data = data;\n store[context].refs.forEach((ref) => ref.render());\n },\n};\n\nexport default store;\n\n// SearchHistory.js\n\nimport store from '../../store.js';\n\nexport default class SearchHistory {\n constructor($target) {\n this.$target = $target;\n\n this.$el = document.createElement('ul');\n this.$el.className = 'SearchHistory';\n\n this.$target.append(this.$el);\n\n store.set('search-history', []); // create 'search-history' context, initialData is []\n store.subscribe('search-history', this); // subscribe 'search-history' context\n }\n\n render() { // 'search-history'가 다른 곳에서 업데이트될 경우 render()가 실행됨\n this.$el.innerHTML = store\n .get('search-history') // get 'search-history' context\n .map((searched) => `<li>${searched}</li>`)\n .join('');\n }\n}